<div class="addressesSection-container">
    <p
        class="alert alert-info"
        ng-show="isFree"
        translate-context="Info"
        translate>Add additional email addresses to your account such as username2@protonmail.com. To enable this feature, <a ui-sref="secured.dashboard({scroll: true})">upgrade to ProtonMail Plus</a>.</p>
    <label class="settingsSignatures-label-active" ng-hide="isFree">
        <div class="settingsSignatures-label-aside">
            <section class="settingsSignatures-header-aside" ng-show="isAdmin">
                <span translate translate-context="info link to Addresses/Users in Signatures page">New Addresses can be added on</span>
                <a ui-sref="secured.members({ action: 'scroll' })" class="text-purple">Addresses/Users</a>
            </section>
            <section class="help-dnd" ng-if="activeAddresses.length > 1" translate-context="Help" translate>You can drag and drop active addresses to order them. The top address is the default address.</section>
        </div>
    </label>
    <div class="activeAddresses-container">
        <ul
            class="pm_sort-container"
            data-as-sortable="aliasDragControlListeners"
            data-is-disabled="activeAddresses.length === 1"
            ng-class="{ 'as-sortable-disabled': activeAddresses.length === 1 }"
            data-ng-model="activeAddresses">

            <li
                class="pm_sort-item"
                ng-repeat="address in activeAddresses track by address.ID"
                data-as-sortable-item
                ng-class="{'unsortable': true}">
                <div class="pm_sort-item-content" as-sortable-item-handle="">
                    <div class="activeAddresses-email">
                        <span class="ellipsis">{{ address.Email }}</span>
                    </div>
                    <div class="activeAddresses-badge">
                        <span
                            class="pm_badge primary"
                            ng-show="$first"
                            translate-context="Info"
                            translate>Default</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
